<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <!-- <mate name="flexibel" content="initial-drl=2"/> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>售后申请</title> 
    <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>  
    <![endif]-->
    <script type="text/javascript" src="__PUBLIC__/js/rem.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/css/ZM_share.css"/>
    <style>
        .after_sales {position: relative;}
        /* 搜索查询 */
        .public_orders_search {
            overflow: hidden;
            border: 1px solid #d3d3d3;
            margin: 10px;
            border-radius: 5px;
            background: #fff;
            padding: 10px;
            line-height: 24px;
        }
        .public_os_info {
            font-size: 14px;
            color: #333;
            line-height: 24px;
        }
        .public_os_form {
            overflow: hidden;
            margin: 4px 0 10px;
        }
        .public_os_form .input {
            padding-left: 5px;
            box-sizing: border-box;
            float: left;
            height: 35px;
            line-height: 35px; 
            border: 1px solid #d7d7d7;
            border-right: none;
            width: 75%;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .public_os_form .btn {
            box-sizing: border-box;
            float: right;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            width: 25%;
            height: 35px;
            line-height: 35px;
            background-color: #f90;
            color: #fff;
            font-size: 18px;
            border: none;
        }
        .as_tit {
            height: 36px;
            background-color: red;
            line-height: 36px;
            text-align: center;
            display: block;
            color: #fff;
            margin: 8px 0 4px;
            border-radius: 4px;
        }
        .as_form {position: relative;overflow: hidden;}
        .as_form .input_text,.as_form .input_textarea{
            position: relative;
            display: block;
            overflow: hidden;
            padding: 0 0 0 100px;
            height: 32px;
            margin: 6px 0 0;
        }
        .as_form .input_text span,.as_form .input_textarea span {
            width: 94px;
            padding: 0 0 0 6px;
            position: absolute;
            left: 0;
            top: 0;
            height: 32px;
            line-height: 32px;
        }
        .as_form .input_text input, .as_form .input_textarea textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            height: 32px;
            padding: 0 4px;
        }
        .as_form .input_textarea textarea {height: 70px;}
        .as_form .input_text span.on:after {
            content: '*';
            color: red;
            position: absolute;
            width: 6px;
            text-align: right;
            height: 32px;
            top: 0;
            left: 0;
        }
        .as_form .input_sel span.on:after {
            content: '*';
            color: red;
            position: absolute;
            width: 6px;
            text-align: right;
            height: 32px;
            top: 0;
            left: 0;
        }
        .as_form .input_sel {
            position: relative;
            display: block;
            overflow: hidden;
            padding: 0 0 0 100px;
            height: 32px;
            margin: 6px 0 0;
            background-image: url('__PUBLIC__/images/public/inquiry_down.png');
            background-repeat: no-repeat;
            background-position: 98% center;
            background-size: 16px;
        }
        .as_form .input_sel span {
            width: 94px;
            padding: 0 0 0 6px;
            position: absolute;
            left: 0;
            top: 0;
            height: 32px;
            line-height: 32px;
        }
        .as_form .input_sel select {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            height: 32px;
            padding: 0 32px 0 4px;
        }
        .as_form .input_radio {
            position: relative;
            display: block;
            overflow: hidden;
            padding: 0 0 0 100px;
            margin: 6px 0 0;
        }
        .as_form .input_radio span {
            width: 94px;
            padding: 0 0 0 6px;
            position: absolute;
            left: 0;
            top: 0;
            height: 32px;
            line-height: 32px;
        }
        .as_form .input_radio span.on:after {
            content: '*';
            color: red;
            position: absolute;
            width: 6px;
            text-align: right;
            height: 32px;
            top: 0;
            left: 0;
        }
        .as_form .input_radio div {
            width: 100%;
            height: 32px;
            line-height: 32px;
        }
        .as_form .input_radio .radio_class {
            -webkit-appearance: radio;
            -moz-appearance: radio;
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
            margin-bottom: 1px;
            margin-right: 2px;
        }
        .as_form .input_radio .text_class {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            height: 32px;
            padding: 0 4px;
        }
        .as_form .input_radio p {
            color: red;
            font-size: 12px;
            line-height: 18px;
        }
        .as_form .input_btn {margin: 10px 0 0;overflow: hidden;}
        .as_form .input_btn .sure {
            border: 1px solid #f90;
            background-color: #f90;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .as_form .input_btn .cancel {
            background-color: #999;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .as_form .input_btn a {
            width: 50%;
            float: left;
            box-sizing: border-box;
            height: 36px;
            line-height: 36px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <header class="share_header">
        <h1 class="zm">售后申请</h1>
        <include file="Public/bzhhtop"/>
    </header>
    <div class="zm_banner">
        <img src="__PUBLIC__/images/public/topbanner.gif" width="100%"/>
    </div>
    <div class="public_orders_search">
        <!--<div class="public_os_info">温馨提示：未付款订单只能通过订单号查询，已付费测算可通过绑定手机号查看。</div>-->
        <!--<div class="public_os_form">-->
            <!--<form class="J_ajaxForm" action="" method="post">-->
                <!--<input type="text" name="keyword" nolocal="true" placeholder="订单号/手机号" class="input">-->
                <!--<input type="button" value="查询" class="J_ajax_submit_btn btn">-->
            <!--</form>-->
        <!--</div>-->
        <div class="after_sales">
            <strong class="as_tit">申请单</strong>
            <div class="as_form">
                <p>请尽可能详细地填写关于订单的信息，客服会在 <font color="#ff2c0c">7个工作日内</font> 在线及时处理。</p>
                <form id="_form" class="J_ajaxForm" action="<!--{:U('Index/shouhoufuwu','',false)}-->" method="post">
                    <div class="input_text">
                        <span class="on">姓名：</span>
                        <input type="text" name="username" placeholder="测算时填写的姓名">
                    </div>
                    <div class="input_text">
                        <span class="on">付款时间：</span>
                        <input type="text" name="payment_time"  id="datetime" placeholder="支付时间" readonly="">
                    </div>
                    <div class="input_sel">
                        <span class="on">问题类型：</span>
                        <select id="typeid" name="typeid">
                            <option value="1">已付费，未查询到付费结果</option>
                            <option value="0">其它</option></select>
                    </div>
                    <div class="input_textarea" id="show_textarea" style="display:none;height:70px;">
                        <span></span>
                        <textarea placeholder="请具体描述您遇到的问题" name="content" maxlength="40"></textarea>
                    </div>
                    <div class="input_radio">
                        <span class="on">联系方式：</span>
                        <div>
                            <input class="radio_class" type="radio" name="contact_type" contact_name="contact_wx" value="1" checked="">微信 
                            <input class="radio_class" type="radio" name="contact_type" contact_name="contact_qq" value="2">QQ
                        </div>
                        <input class="text_class" type="text" id="contact_text" name="contact_wx" placeholder="您的QQ账号或微信账号" value="" >
                        <p>请务必填写正确的QQ账号或微信账号，方便客服联系您。</p>
                    </div>
                    <div class="input_radio">
                        <span class="">联系邮箱：</span>
                        <input class="text_class" type="text" name="contact_email" placeholder="可以联系到您的邮箱">
                        <!--<p>请正确填写，测算信息会以邮件发至您的邮箱。</p>-->
                    </div>
                    <div class="input_text">
                        <span class="">绑定手机号：</span>
                        <input type="text" name="contact_phone">
                    </div>
                    <div class="input_btn">
                        <a href="javascript:;" class="J_ajax_submit_btn sure">确认提交</a>
                        <a href="ZM_mycesuan.html" class="cancel">取消</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
     <div class="hot_cs">

         <include file="Public/zhiming" />

    </div>
    <footer class="footer_severs">
        <include file="Public/bottom" />
    </footer>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/js/datePicker.js"></script>
    <script src="__PUBLIC__/js/layer/layer.js"></script>
    <Script>
        $('.btn').on('click',function(){
            if($('.input').val() == ''){
                layer.msg('请输入查询内容');
                return false;
            }
            layer.load();
            // 查询失败
            setTimeout(function(){
                    layer.closeAll('loading');
                    layer.msg('该订单不存在');
                },500);
            // 查询成功
            // setTimeout(function(){
            //     layer.closeAll('loading');
            //     layer.msg('查询成功', {icon: 1});
            // },1000);
        });
        // 时间
        var calendar = new datePicker();
        calendar.init({
            'trigger': '#datetime', /*按钮选择器，用于触发弹出插件*/
            'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
            'minDate':'1900-1-1',/*最小日期*/
            'maxDate':'2100-12-31',/*最大日期*/
            'onSubmit':function(){/*确认时触发事件*/
                var theSelectData=calendar.value;
            },
            'onClose':function(){/*取消时触发事件*/
            }
        });
        $(".sure").on('click',function(){
                if($("[name='username']").val() == ""){
                    layer.msg("请填写测算时的姓名");
                    return false;
                }
                var patrn= /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
                if(!patrn.exec($("[name='username']").val())){
                    layer.msg("请输入正确的姓名");
                    return false;
                }
                if($("[name='payment_time']").val() == ""){
                    layer.msg("请选择支付时间");
                    return false;
                }
                if($("#contact_text").val() == ""){
                    layer.msg("请填写联系方式（QQ/微信）");
                    return false;
                }
                if(!isEmail($("[name='contact_email']").val())){
                    layer.msg("请输入正确的邮箱格式如：470181159@qq.com");
                    return false;
                }
                function isEmail(str){
                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                return  reg.test(str);
                }
                setTimeout(function(){
                    layer.closeAll('loading');
                    layer.msg('提交成功', {icon: 1});
                    setTimeout(function(){
                        $('#_form').submit();
                    },2000);
                },1000);
            });
            $('#typeid').on('click',function(){
                if($('#typeid').val() == true){
                    $('#show_textarea').css('display','none');
                }else{
                    $('#show_textarea').css('display','block');
                }
            })
    </script>
</body>
</html>